<template>
  <div class="shouye">
    <div class="shouye-msg">
      <span>客服七尾，欢迎回来！</span>
    </div>
    <data-panel></data-panel>
    <!-- 访客量统计 -->
    <div class="fwltj">
      <div class="fwltj-head">访问量统计</div>
      <div ref="fwltjChart" :style="{ width: '800px', height: '320px' }"></div>
    </div>
    <smart-way></smart-way>
    <!-- 客服监控 -->
    <div class="kfjk">
      <div class="kfjk-head">客服监控</div>
      <div class="kfjk-table">
        <kfjk-table :mydata="kfjkData" :mytitle="kfjkTitle"></kfjk-table>
      </div>
    </div>
  </div>
</template>

<script>
import DataPanel from "@/components/DataPanel";
import SmartWay from "@/components/SmartWay";
import KfjkTable from "@/components/MyTable/KfjkTable";
export default {
  components: {
    DataPanel,
    SmartWay,
    KfjkTable,
  },
  mounted() {
    this.drawLine();
    this.$store.commit('setTitle','首页')
    this.$store.commit('NavStyleClear','首页')
  },
  data() {
    return {
      kfjkData: [
        {
          name: "客服小美",
          status: "在线",
          time: "6h",
          sessions: 30,
          massages: 389,
          loadingTime: "24s",
          sessionTime: "5min",
        },
        {
          name: "客服小美2",
          status: "在线",
          time: "6h",
          sessions: 30,
          massages: 389,
          loadingTime: "24s",
          sessionTime: "5min",
        },
        {
          name: "客服小美3",
          status: "离线",
          time: "6h",
          sessions: 30,
          massages: 389,
          loadingTime: "24s",
          sessionTime: "5min",
        },
        {
          name: "客服小美",
          status: "在线",
          time: "6h",
          sessions: 30,
          massages: 389,
          loadingTime: "24s",
          sessionTime: "5min",
        },
        {
          name: "客服小美2",
          status: "在线",
          time: "6h",
          sessions: 30,
          massages: 389,
          loadingTime: "24s",
          sessionTime: "5min",
        },
        {
          name: "客服小美3",
          status: "离线",
          time: "6h",
          sessions: 30,
          massages: 389,
          loadingTime: "24s",
          sessionTime: "5min",
        },
      ],
      kfjkTitle: [
        {
          name: "客服昵称",
          prop: "name",
          width: 131,
        },
        {
          name: "状态",
          prop: "status",
          width: 185,
        },
        {
          name: "在线时长",
          prop: "time",
          width: 185,
        },
        {
          name: "会话数",
          prop: "sessions",
          width: 185,
        },
        {
          name: "消息数",
          prop: "massages",
          width: 185,
        },
        {
          name: "平均响应时长",
          prop: "loadingTime",
          width: 185,
        },
        {
          name: "平均会话时长",
          prop: "sessionTime",
          width: 185,
        },
      ],
    };
  },
  methods: {
    drawLine() {
      var myChart = this.$echarts.init(this.$refs.fwltjChart);
      myChart.setOption({
        title: {
          // text: "访问量统计"
        },
        tooltip: {
          trigger: "axis",
          // 坐标轴指示器配置项。
          axisPointer: {
            type: "cross", //指示器样试
          },
        },
        toolbox: {
          feature: {
            // 动态类型切换,切换图表
            magicType: {
              type: ["line", "bar"],
            },
            //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            dataView: {
              show: true, //是否显示 数据示图
              readOnly: false, //是否 直接可以编辑数据。
            },
            //保存为图片的配置
            saveAsImage: {
              show: true,
            },
            //配置项还原
            restore: { show: true },
          },
        },
        //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        legend: {
          data: ["总访问量", "总会话量", "有效会话量"], //对应的是name
        },
        //配置X轴
        xAxis: {
          //坐标轴类型
          type: "category",
          //配置类目名称。 可以逐一设置，具体看文档
          data: [
            "10:00",
            "10:30",
            "11:00",
            "11:30",
            "12:00",
            "12:30",
            "13:00",
            "13:30",
            "14:00",
            "14:30",
            "15:00",
            "15:30",
            "16:00",
            "16:30",
            "17:00",
          ],
          //配置 鼠标移入时显示的 阴影指示器'line' 直线指示器 'shadow' 阴影指示,器  'none' 无指示器
          axisPointer: {
            show: true, //show 必须写，开关的作用
            type: "shadow",
          },
        },
        //配置Y轴
        yAxis: [
          {
            type: "value", //坐标轴类型
            // name: "会话数",
            min: 0,
            max: 75,
            interval: 15,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        //系列列表。每个系列通过 type 决定自己的图表类型,一个对象表示一个列表
        series: [
          {
            name: "总访问量",
            type: "line",
            data: [40, 34, 36, 50, 48, 62, 49, 50, 55, 65, 57, 65, 70, 56, 61],
            itemStyle: {
              color: "#90EE90",
            },
          },
          {
            name: "总会话量",
            type: "line",
            data: [33, 27, 32, 45, 40, 52, 43, 44, 42, 55, 42, 35, 45, 33, 31],
            itemStyle: {
              color: "#FF0000",
            },
          },

          {
            name: "有效会话量",
            type: "line",
            data: [25, 25, 30, 33, 35, 42, 33, 24, 32, 45, 32, 25, 40, 30, 25],
            itemStyle: {
              color: "#F90",
            },
          },
        ],
        //图表的颜色
        color: [
          "#CCC",
          "#AFA",
          "#61a0a8",
          "#d48265",
          "#91c7ae",
          "#749f83",
          "#ca8622",
          "#bda29a",
          "#6e7074",
          "#546570",
          "#c4ccd3",
        ],
      });
      //鼠标事件
      myChart.on("click", function (params) {
        console.log(params);
      });
    },
  },
};
</script>

<style>
.shouye {
  display: flex;
  flex-wrap: wrap;
}

.shouye-msg {
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
    sans-serif;
  font-weight: 650;
  font-style: normal;
  font-size: 20px;
  height: 45px;
  padding-left: 10px;
}

.fwltj {
  width: 800px;
  height: 317px;
  background-color: #ffffff;
  margin-right: 10px;
  padding: 20px 20px;
}

.fwltj-head {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}

.kfjk {
  width: 1294px;
  background-color: #ffffff;
  margin-top: 10px;
  padding-bottom: 30px;
}

.kfjk-head {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  color: #333333;
  margin: 20px;
}

.kfjk-table {
  margin: 0 20px;
}
</style>